<template>
	<view>
		<view class="">
			 <ren-dropdown-filter :filterData='filterData' @onSelected="priceSort" @saleClick="saleClickHandle"></ren-dropdown-filter>
		</view>
		<!-- 商品列表展示区 -->
		<view class="product-main">
			<view class="product-item" v-for="(item,index) in productList" :key="index">
				<view class="product-img-box">
					<image :src="`http:${item.image}`" mode="" class="image"></image>
				</view>
				<view class="product-item-content">
					<view class="item-content-title">
						{{item.title}}
					</view>
					<view class="item-content-price">
						{{item.price}}
					</view>
					<view class="item-content-count">
						{{item.sales}}
					</view>
				</view>
			</view>
		</view>
		<!-- 显示toast提示 -->
		<u-toast ref="uTost"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				queryObject:{
					cid:'',
					price1:'',
					price2:'',
					page:1,
					otype:'all',
					kwords:'',
					param:[]
				},
				productList:[],
				total:0,
				isLoading:false,
				filterData:[
				    [{ text: '综合', value: 'all' }, { text: '价格从高到低', value: 'down' }, { text: '价格从低到高', value: 'up' }]
				]
			}
		},
		methods: {
			async getProductList(){
				this.isLoading=true
				const result=await uni.$api.homeModules.getProductListApi(this.queryObject)
				this.isLoading=false
				console.log('商品列表',result);
				if(result.data.code==200){
					this.productList=[...this.productList,...result.data.data]
					this.total=result.data.pageinfo.total
				}
			},
			async priceSort(arg){
				console.log('zhaijizhe',arg[0][0].value);
				this.queryObject.otype=arg[0][0].value
				const result=await uni.$api.homeModules.getProductListApi(this.queryObject)
				this.productList=result.data.data
				if(result.data.pageinfo){
					this.total=result.data.pageinfo.total
				}
			},
			async saleClickHandle(){
				this.queryObject.otype="sales"
				const result=await uni.$api.homeModules.getProductListApi(this.queryObject)
				this.productList=result.data.data
				if(result.data.pageinfo){
					this.total=result.data.pageinfo.total
				}
				
			}
		},
		onLoad(options) {
			this.queryObject.kwords=options.keyword
			//调用查询方法
			this.getProductList()
		},
		/*
		  上拉触底的方法
		*/
		onReachBottom() {
			if(this.queryObject.page*10>=this.total){
				console.log('---------已经见底了------------');
				this.$refs.uTost.show({message:'没有商品信息了'})
			}else{
				if(this.isLoading){
					return;
				}
				console.log('---------上拉触底------------');
				this.queryObject.page++
				this.getProductList()
			}
			
		},
		onPullDownRefresh() {
			this.queryObject.page=1
			this.getProductList()
			uni.stopPullDownRefresh()
		}
	}
</script>

<style lang="scss">
	.product-item{
		font-size: 28rpx;
		display: flex;
		box-sizing: border-box;
		background-color: #f5f5f5;
		margin: 10rpx;
		.product-img-box{
			padding: 10rpx;
			height: 100%;
			.image{
				width: 250rpx;
				height: 250rpx;
			}
		}
		.product-item-content{
			flex-grow: 1;
			display: flex;
			flex-direction: column;
			justify-content:space-between;
			padding: 10rpx;
		}
	}
</style>
